<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>07-dataset的演示</title>
</head>

<body>
  <div id="main" style="width: 800px;height:400px;"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
  <script>
    const chartDom = document.getElementById('main')
    const chart = echarts.init(chartDom)
    const option = {
      title:{
        text:'AAA',
        subtext:'aaa'
      },
      xAxis: {
        type: 'category'
      },
      yAxis: {},
      dataset: {
        source: [
          ['一季度', 79, 100, '分类1', 50],
          ['二季度', 81, 112, '分类2', 60],
          ['三季度', 88, 96, '分类3', 55],
          ['四季度', 72, 123, '分类4', 70],
        ]
      },
      legend: {
        data: ['销售', '利润', '市场份额']
      },
      series: [
        {
          name: '销售',
          type: 'bar',
          encode: { x: 0, y: 1 }
        },
        {
          name: '利润',
          type: 'line',
          encode: { x: 0, y: 2 }
        },
        {
          name: '市场份额',
          type: 'pie',
          radius: 35,
          center: ['60%', 50],
          encode: { itemName: 3, value: 4 }
        }
      ]
    }
    chart.setOption(option)
  </script>
</body>

</html>